﻿<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>


<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    <%--//获取后台数据--%>
    $(function(){
       $.ajax({
           url:'${pageContext.request.contextPath}/user/getSexCount',
           dataType: "JSON",
           success: function(data) {
               // 指定图表的配置项和数据
               var option = {
//        图表的标题
                   title: {
                       text: '男女性别统计'
                   },
                   tooltip: {},
//        设置当前的图表中 需要展示多少种数据的类型  例如 销量数据  性别  日期
                   legend: {
                       data: ['人数']
                   },
//        横坐标  x轴
                   xAxis: {
                       data: ["男", "女"]
                   },
                   // y轴
                   yAxis: {},
                   series: [{
//            name的值 必须和legend data中的值 对应上
                       name: '人数',
//            设置展示的样式  bar柱状图  line 折线图 pie 饼状图
                       type: 'bar',
                       barWidth : 30,
//            此处的数据个数 需要和x轴一致  赋值的时候需要赋值js对象 还是Json字符串
                       data: [data[0].value, data[1].value]
                   }]
               };
               // 使用刚指定的配置项和数据显示图表。
               myChart.setOption(option);
            }
           })
        })
</script>